import React , { Component } from 'react';
import './userCenterPages.css';
import { Form, Input, Button} from 'antd';

class EditPassword extends Component {
  
  onFinish = values => {
    console.log('Success:', values);
  };

  render() {
    const layout = {
      wrapperCol: { span: 7 },
    };
    return (
      <div className="edit-password-wrapper">
        <h1>请设置新密码</h1>
        <div className="form-wrapper">
            <Form 
              {...layout} 
              ref={this.formRef}   
              name="control-ref" 
              onFinish={this.onFinish}
              
            > 
              <Form.Item 
                name="user_id" 
              >
                <span>工号</span>
                <Input className="input" disabled/>
              </Form.Item>   
              <Form.Item
                  name="user_password"
                  rules={[
                    {
                      required: true,
                      message: '请输入登录密码!',
                    },{
                      min: 6,
                      message: '密码必须大于等于6位'
                    },{
                      max: 12,
                      message: '密码必须小于等于12位'
                    },{
                      pattern: /^[a-zA-Z0-9_]+$/,  // pattern正则表达式匹配
                      message: '密码必须是英文、数字或下划线组成',
                  }
                  ]}
                >
                  <span>密码</span>
                  <Input
                    className="input"
                    type="password"
                    placeholder="6-12位，建议英文、数字、下划线组成"
                  />
                </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" className="button">
                  保存
                </Button>
              </Form.Item>
            </Form>
        </div>
      </div>
    )
  }
}

export default EditPassword;